<template>
  <div>
    <el-input v-model="region"></el-input>
    <el-input v-model="pageCapacity"></el-input>
    <el-input id="search" v-model="searchText"></el-input>
    {{data}}
    <div id="txMap" style="width: 400px;height: 300px;"></div>
    {{lat}},
    {{lon}}
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      searchText: "",
      region: "重庆",
      pageCapacity: 10,
      lat: 29.325491865412,
      lon: 107.75971415453
    };
  },
  created() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
  props: ['data'],
  methods: {
    initMap() {
      let lat = this.lat;
      let lon = this.lon;
      let that = this;
      const markers = [];
      const center = new qq.maps.LatLng(lat, lon);
      const map = new qq.maps.Map(document.getElementById("txMap"), {
        center, // 地图的中心地理坐标。
        zoom: 15 // 地图的中心地理坐标。
      });
      var centerMarker = new qq.maps.Marker({
        position: center,
        map: map
      });
      // qq.maps.event.addListener(centerMarker, "click", function(e) {
      //   console.log("click centerMarker", e, centerMarker);
      // });
      qq.maps.event.addListener(map, "click", function(event) {
        centerMarker.setMap(null);
        var mapClickAddmarker = new qq.maps.Marker({
          position: event.latLng,
          map: map
        });
        that.lat = event.latLng.lat;
        that.lon = event.latLng.lng;
        qq.maps.event.addListener(map, "click", function(event) {
          mapClickAddmarker.setMap(null);
        });
      });
      
      // var marker;
      const latlngBounds = new qq.maps.LatLngBounds();
      const searchService = new qq.maps.SearchService({
        // map,
        complete: function(results) {
          //设置回调函数参数
          var pois = results.detail.pois;
          var infoWin = new qq.maps.InfoWindow({
            map: map
          });
          var latlngBounds = new qq.maps.LatLngBounds();
          for (var i = 0, l = pois.length; i < l; i++) {
            var poi = pois[i];
            //扩展边界范围，用来包含搜索到的Poi点
            latlngBounds.extend(poi.latLng);
            (function(n) {
              var marker = new qq.maps.Marker({
                position: pois[n].latLng,
                map: map
              });
              marker.setTitle(i + 1);
              markers.push(marker);

              qq.maps.event.addListener(marker, "click", function() {
                console.log(pois[n], "pois[n]");
                infoWin.open();
                infoWin.setContent(
                  `<div style="width:280px;height:100px;">
                    ${pois[n].name? `<div style="color: #00C0EF;font-size: 16px;margin: 10px 0;">${pois[n].name || "暂无"}</div>`: ""}
                    ${pois[n].address? `<div style="color: #37373D;font-size: 12px;margin: 5px 0;line-height: 1">地址: ${pois[n].address || "暂无"}</div>`: ""}
                    ${pois[n].category?`<div style="color: #37373D;font-size: 12px;margin: 5px 0;line-height: 1">种类: ${pois[n].category || "暂无"}</div>`:''}
                    ${pois[n].phone? `<div style="color: #37373D;font-size: 12px;margin: 5px 0;">电话: ${pois[n].phone || "暂无"}</div>`: ""}
                  </div>`
                );
                infoWin.setPosition(pois[n].latLng);
                that.lat = pois[n].latLng.lat;
                that.lon = pois[n].latLng.lng;
              });
            })(i);
          }
          //调整地图视野
          map.fitBounds(latlngBounds);
        }
      });
      const ap = new qq.maps.place.Autocomplete(
        document.getElementById("search")
      );
      qq.maps.event.addListener(ap, "confirm", function(res) {
        centerMarker.setMap(null);
        markers.map((item, index) => {
          item.setMap(null);
        });
        const region = that.region;
        const pageCapacity = that.pageCapacity;
        console.log(region, "region");
        searchService.setLocation(region); //设置默认检索范围（默认为全国），类型可以是坐标或指定的城市名称。
        // searchService.setPageIndex(pageIndex); //设置检索的特定页数。
        searchService.setPageCapacity(Number(pageCapacity)); //设置每页返回的结果数量。
        searchService.search(res.value);
        // searchService.setMap(map)
        console.log(searchService, "searchService");
      });
    }
  }
};
</script>
<style scoped>
</style>